<!-- 流程设置 -->
<template>
    <el-card class="!border-none" shadow="never">
        <el-row>
            <el-col :span="4">
                <el-tree style="max-width: 600px" :data="optionsData.dept" :props="{
                    value: 'id',
                    label: 'name'
                }" @node-click="handleNodeClick" />
            </el-col>
            <el-col :span="20">
                <el-tabs v-model="activeName" @tab-change="handleClick">
                    <el-tab-pane label="提案流程" name="first">
                        <el-collapse v-model="activeNames">
                            <el-collapse-item name="1" title="流程列表">
                                <el-row>
                                    <el-col :span="14">
                                        <el-button v-perms="['system:process:add']" type="primary" @click="handleAdd()">
                                            <template #icon>
                                                <icon name="el-icon-Plus" />
                                            </template>
                                            基础流程
                                        </el-button>
                                    </el-col>
                                    <el-col :span="10">
                                        <el-form :inline="true" class="mb-[-16px]">
                                            <el-form-item>
                                                <el-input v-model="queryParams.name" class="w-[280px]"
                                                    placeholder="输入部门名称查询" />
                                            </el-form-item>
                                            <el-form-item>
                                                <el-button type="primary" @click="resetPage">查询</el-button>
                                            </el-form-item>
                                        </el-form>
                                    </el-col>
                                </el-row>
                                <el-table class="mt-4" size="large" :data="pager.lists" stripe>
                                    <el-table-column label="序号" type="index" width="80" />
                                    <el-table-column label="部门名称" prop="name" min-width="120" />
                                    <el-table-column label="是否配置流程" prop="deptFlow.isProposal" min-width="120">
                                        <template #default="{ row }">
                                            {{ row.deptFlow ? '是' : '否' }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="流程类型" prop="deptFlow.proposalType" min-width="220">
                                        <template #default>
                                            专利，商标，版权
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="已配置流程" prop="deptFlow.configProposal" min-width="100" />
                                    <el-table-column label="操作" width="120" fixed="right">
                                        <template #default="{ row }">
                                            <el-button link type="primary" size="small" @click.prevent="handleEdit(row)"
                                                :icon="EditPen" v-perms="['system:process:edit']">
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-collapse-item>
                        </el-collapse>
                    </el-tab-pane>
                    <el-tab-pane label="合同流程" name="second">
                        <el-collapse v-model="activeNames">
                            <el-collapse-item name="1" title="流程列表">
                                <el-row>
                                    <el-col :span="14">
                                        <el-button v-perms="['system:process:add']" type="primary" @click="handleAdd()">
                                            <template #icon>
                                                <icon name="el-icon-Plus" />
                                            </template>
                                            基础流程
                                        </el-button>
                                    </el-col>
                                    <el-col :span="10">
                                        <el-form :inline="true" ref="formRef" class="mb-[-16px]">
                                            <el-form-item prop="name">
                                                <el-input v-model="queryParams.name" class="w-[280px]"
                                                    placeholder="输入部门名称查询" />
                                            </el-form-item>
                                            <el-form-item>
                                                <el-button type="primary" @click="resetPage">查询</el-button>
                                            </el-form-item>
                                        </el-form>
                                    </el-col>
                                </el-row>
                                <el-table class="mt-4" size="large" :data="pager.lists" stripe>
                                    <el-table-column label="序号" type="index" width="80" />
                                    <el-table-column label="部门名称" prop="name" min-width="120" />
                                    <el-table-column label="是否配置流程" prop="deptFlow.isProposal" min-width="120">
                                        <template #default="{ row }">
                                            {{ row.deptFlow ? '是' : '否' }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="流程类型" prop="deptFlow.proposalType" min-width="220">
                                        <template #default>
                                            专利，商标，版权
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="已配置流程" prop="deptFlow.configProposal" min-width="100" />
                                    <el-table-column label="操作" width="120" fixed="right">
                                        <template #default="{ row }">
                                            <el-button link type="primary" size="small" @click.prevent="handleEdit(row)"
                                                :icon="EditPen" v-perms="['system:process:edit']">
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-collapse-item>
                        </el-collapse>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
    </el-card>
    <EditPopup v-if="showEdit" ref="editRef" @close="showEdit = false" />
</template>

<script lang="ts" setup name="processset">
import { DocumentAdd, EditPen, FolderChecked, CircleClose } from '@element-plus/icons-vue'
import EditPopup from './edit.vue'
import { deptLists } from '@/api/org/department'
import { deptFlowLists } from '@/api/deptFlow'
import { usePaging } from '@/hooks/usePaging'
import { useDictOptions } from '@/hooks/useDictOptions'
import feedback from '@/utils/feedback'
interface Tree {
    label: string
    children?: Tree[]
}
const activeName = ref('first')


const activeNames = ['1', '2', '3', '4', '5', '6', '7', '8', '9']
const showEdit = ref(false)

const editRef = shallowRef<InstanceType<typeof EditPopup>>()
const queryParams = reactive({
    depId: 1,
    type: '提案流程',
    name: ''
})
const handleClick = (val: any) => {
    const tabLabel = activeName.value === 'first' ? '提案流程' : '合同流程'
    queryParams.type = tabLabel
    getLists()
}
const handleNodeClick = (data: Tree) => {
    queryParams.depId = data.id
    getLists()
}
const { optionsData } = useDictOptions<{
    dept: any[]
}>({
    dept: {
        api: deptLists
    }
})

const handleEdit = async (data: any) => {
    showEdit.value = true
    await nextTick()
    const tabLabel = activeName.value === 'first' ? '提案流程' : '合同流程'
    editRef.value?.open('edit', tabLabel)
    editRef.value?.getDetail(data, tabLabel)
}
const handleAdd = async () => {
    showEdit.value = true
    await nextTick()
    const tabLabel = activeName.value === 'first' ? '提案流程' : '合同流程'
    editRef.value?.open('add', tabLabel)
}


const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: deptFlowLists,
    params: queryParams
})

getLists()
</script>

<style scoped>
::v-deep .el-collapse-item__header {
    padding-left: 54px;
    background-color: var(--el-bg-color-collapse);
    font-size: 16px;
    font-weight: 600;
    color: var(--el-text-color-collapse);
}

::v-deep .el-collapse-item__wrap {
    padding-top: 20px;
}
</style>
